<template>
  <div class="yun_div">
    <div class="yun_div2">
      <!-- 头部 -->
      <div class="yun_top">
        模板名称：<input
          type="text"
          class="yun_input1"
          placeholder="请输入模板名称"
        />

        <button class="yun_btn1">
          <i class="yun_btn1_i1"
            ><svg
              t="1675869699114"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5759"
              id="mx_n_1675869699115"
              width="15"
              height="15"
            >
              <path
                d="M809.246403 771.926938 777.737782 803.458071 924.965961 950.667831 956.476629 919.157163Z"
                fill="#ffffff"
                p-id="5760"
              ></path>
              <path
                d="M454.878536 70.285786C239.51556 70.285786 64.93236 244.847497 64.93236 460.231963c0 215.341486 174.583201 389.945153 389.945153 389.945153 215.362976 0 389.9472-174.603667 389.9472-389.945153C844.825736 244.847497 670.241512 70.285786 454.878536 70.285786zM454.878536 805.611108c-190.750415 0-345.381192-154.626683-345.381192-345.379145 0-190.751439 154.629753-345.380168 345.381192-345.380168 190.752462 0 345.382215 154.62873 345.382215 345.380168C800.259728 650.983401 645.630998 805.611108 454.878536 805.611108z"
                fill="#ffffff"
                p-id="5761"
              ></path></svg
          ></i>
          搜索
        </button>
        <button class="yun_btn2">
          <i class="yun_btn2_i2"
            ><svg
              t="1675867780399"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4669"
              width="15"
              height="15"
            >
              <path
                d="M928.16 144H736V64a32 32 0 0 0-32-32H320a32 32 0 0 0-32 32v80H95.84a32 32 0 0 0 0 64H129.6l77.92 698.656A96 96 0 0 0 302.912 992h418.144a96.032 96.032 0 0 0 95.424-85.344L894.4 208h33.728a32 32 0 0 0 0.032-64zM352 96h320v48H352V96z m400.896 803.552a32 32 0 0 1-31.808 28.448H302.912a32 32 0 0 1-31.808-28.448L193.984 208h636.032l-77.12 691.552z"
                p-id="4670"
              ></path>
              <path
                d="M608 820.928a32 32 0 0 0 32-32V319.104a32 32 0 0 0-64 0v469.824a32 32 0 0 0 32 32zM432 820.928a32 32 0 0 0 32-32V319.104a32 32 0 0 0-64 0v469.824a32 32 0 0 0 32 32z"
                p-id="4671"
              ></path></svg
          ></i>
          清空
        </button>
      </div>

      <!-- 按钮 -->
      <div class="yun_top2">
        <button class="yun_btn3">
          <i class="yun_btn3_i1"
            ><svg
              t="1675870437046"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6694"
              width="15"
              height="15"
            >
              <path
                d="M469.333333 469.333333V170.666667h85.333334v298.666666h298.666666v85.333334h-298.666666v298.666666h-85.333334v-298.666666H170.666667v-85.333334h298.666666z"
                fill="#ffffff"
                p-id="6695"
              ></path></svg
          ></i>
          新增
        </button>
        <button class="yun_btn4">批量删除</button>

        <p class="yun_top2_p1">
          当前表格已选择 <b>{{ check }}</b> 项 &ensp; <span>清空</span>
        </p>
      </div>

      <div class="yun_table">
        <!-- table表格 -->
                                       
                                          <el-table :data="liss" style="width: 90%" max-height="250" class="tab_ju">
                                             <el-table-column type="selection" width="350"  />
                                                  
                                            <el-table-column  prop="transName" label="模板名称" width="700" />
                                            <el-table-column fixed="right" label="操作" width="120">

                                              <template #default="scope">
                                                <el-button
                                                  link
                                                  type="primary"
                                                  size="small"
                                                  @click.prevent="deleteRow2(scope.$index)"
                                                >
                                                  修改
                                                </el-button>

                                                 <el-button
                                                  link
                                                  type="primary"
                                                  size="small"
                                                  @click.prevent="deleteRow(scope.$index)"
                                                >
                                                  删除
                                                </el-button>
                                              </template>
                                            </el-table-column>
                                          </el-table>
                                         
                                       

        <div class="demo-pagination-block">
          <el-pagination
            :page-sizes="[100, 200, 300, 400]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="3"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>


  
  <script lang="ts" setup>
import { onMounted, ref } from "vue";
import { yunfei } from '../../api/index'
import dayjs from 'dayjs'

const now = new Date()

interface User {
  transName: string;
  address: string;
}

const liss=ref([])
onMounted(async ()=>{
const res=await yunfei()
liss.value=res.data.records
console.log(liss);
})







const currentPage1 = ref(5);
const check = ref(0);
const currentPage2 = ref(5);
const currentPage3 = ref(5);
const currentPage4 = ref(4);
const pageSize2 = ref(100);
const pageSize3 = ref(100);
const pageSize4 = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};



//表个人
// const tableData = ref([
//   {
//     date: '2016-05-01',
//     name: 'Tom',
//     state: 'California',
//     city: 'Los Angeles',
//     address: 'No. 189, Grove St, Los Angeles',
//     zip: 'CA 90036',
//   },
//   {
//     date: '2016-05-02',
//     name: 'Tom',
//     state: 'California',
//     city: 'Los Angeles',
//     address: 'No. 189, Grove St, Los Angeles',
//     zip: 'CA 90036',
//   },
//   {
//     date: '2016-05-03',
//     name: 'Tom',
//     state: 'California',
//     city: 'Los Angeles',
//     address: 'No. 189, Grove St, Los Angeles',
//     zip: 'CA 90036',
//   },
// ])

const deleteRow = (index: number) => {
  liss.value.splice(index, 1)
}

const deleteRow2 = (index: number) => {
  // liss.value.splice(index, 1)
  alert('我做的是页面')
}

// const onAddItem = () => {
//   now.setDate(now.getDate() + 1)
//   tableData.value.push({
//     date: dayjs(now).format('YYYY-MM-DD'),
//     name: 'Tom',
//     state: 'California',
//     city: 'Los Angeles',
//     address: 'No. 189, Grove St, Los Angeles',
//     zip: 'CA 90036',
//   })
// }


</script>
  
  <style scoped>


.tab_ju{
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.yun_div {
  width: 100%;
  height: 650px;
  background: rgb(241, 241, 241);
  padding-top: 20px;
}

.yun_div2 {
  width: 98%;
  height: 98%;
  margin-left: 15px;
  background: #fff;
  box-shadow: 3px 3px 15px #ccc;
  border-radius: 10px;
}


.yun_top {
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding-left: 30px;
  font-size: 16px;
}

.yun_input1 {
  width: 200px;
  height: 25px;
  margin-right: 20px;
  border: solid 1px #ccc;
  margin-left: 10px;
  outline: none;
  margin-right: 150px;
  padding-left: 10px;
  border-radius: 10px;
}
.yun_input1::placeholder {
  color: #ccc;
}

.yun_btn1 {
  width: 70px;
  height: 30px;
  line-height: 30px;
  background: rgb(26, 152, 255);
  color: #fff;
  border: none;
  font-size: 13px;
  border-radius: 10px;
  margin-right: 30px;
  position: relative;
}

.yun_btn1_i1 {
  position: absolute;
  left: 5px;
  top: 3px;
}

.yun_btn2 {
  width: 70px;
  height: 30px;
  line-height: 30px;
  border: solid 1px #ccc;
  background: #fff;
  font-size: 13px;
  border-radius: 10px;
  margin-right: 30px;
  position: relative;
}
.yun_btn2_i2 {
  position: absolute;
  left: 5px;
  top: 3px;
}

.yun_top2 {
  width: 100%;
  height: 80px;
  margin-bottom: 20px;
  padding-left: 20px;
}

.yun_btn3 {
  width: 80px;
  height: 30px;
  line-height: 30px;
  background: rgb(26, 152, 255);
  color: #fff;
  border: none;
  font-size: 13px;
  border-radius: 10px;
  margin-right: 20px;
  position: relative;
}

.yun_btn3_i1 {
  position: absolute;
  left: 10px;
  top: 3px;
}

.yun_btn4 {
  width: 80px;
  height: 30px;
  line-height: 30px;
  background: pink;
  color: #fff;
  border: none;
  font-size: 13px;
  border-radius: 10px;
  margin-right: 30px;
  position: relative;
}

.yun_top2_p1 {
  margin-top: 10px;
  width: 200px;
  height: 30px;
  background: rgb(196, 224, 255);
  text-align: center;
  line-height: 30px;
  color: rgb(95, 106, 255);
  font-size: 14px;
  border-radius: 7px;
  border: solid 1px rgb(61, 200, 255);
  cursor: pointer;
}

.yun_table {
  width: 100%;
  height: 480px;
  padding-left: 20px;
  overflow: auto;
  clear: both;
}
.yun_table {
  margin-left: 20px;
}
.yun_table_btn1 {
  width: 60px;
  height: 30px;
  background: rgb(120, 172, 252);
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}
.yun_table_btn2 {
  width: 60px;
  height: 30px;
  border: none;
  border-radius: 5px;
  background: rgb(253, 112, 135);
  color: #fff;
  cursor: pointer;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.demo-pagination-block {
  float: right;
  margin-right: 50px;
  margin-top: 40px;
}
</style>